import React, { useState, useEffect } from 'react';
import { Modal, Upload, Button, Progress, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const UploadModalParam = ({ 
  visible, 
  onClose, 
  onUploadComplete,
  accept = '*',
  title = '文件上传',
  uploadText = '点击或拖拽文件到此处上传',
  hintText = '支持各种模型文件格式，上传后将自动处理'
}) => {
  // 状态管理
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);
  const [progress, setProgress] = useState(0);
  const [uploadTimer, setUploadTimer] = useState(null);
  
  // 当弹窗关闭时重置状态
  useEffect(() => {
    if (!visible) {
      resetUploadState();
    }
  }, [visible]);
  
  // 清除定时器
  useEffect(() => {
    return () => {
      if (uploadTimer) {
        clearInterval(uploadTimer);
      }
    };
  }, [uploadTimer]);
  
  // 重置上传状态
  const resetUploadState = () => {
    setFileList([]);
    setUploading(false);
    setProgress(0);
    if (uploadTimer) {
      clearInterval(uploadTimer);
      setUploadTimer(null);
    }
  };
  
  // 模拟上传进度 - 实际项目中替换为真实上传逻辑
  const simulateUploadProgress = () => {
    let percent = 0;
    const timer = setInterval(() => {
      percent += 10;
      setProgress(percent);
      
      if (percent >= 100) {
        clearInterval(timer);
        setUploading(false);
        setUploadTimer(null);
        
        // 获取上传的文件信息
        const uploadedFile = fileList[0];
        message.success('上传成功');
        
        // 通知父组件上传完成
        if (onUploadComplete) {
          onUploadComplete(uploadedFile);
        }
        
        // 关闭弹窗
        onClose();
      }
    }, 500);
    
    setUploadTimer(timer);
  };
  
  // 处理上传
  const handleUpload = () => {
    if (fileList.length === 0) {
      message.warning('请先选择文件');
      return;
    }
    
    setUploading(true);
    setProgress(0);
    simulateUploadProgress();
  };
  
  // 上传变化处理
  const handleChange = ({ fileList: newFileList }) => {
    // 只保留最后选择的一个文件
    setFileList(newFileList.slice(-1));
  };
  
  // 上传区域配置
  const uploadProps = {
    fileList,
    onChange: handleChange,
    beforeUpload: (file) => {
      // 阻止自动上传，通过按钮触发
      return false;
    },
    accept,
  };
  
  return (
    <Modal
      title={title}
      open={visible}
      onCancel={onClose}
      footer={[
        <Button 
          key="cancel" 
          onClick={onClose} 
          disabled={uploading}
        >
          取消
        </Button>,
        <Button 
          key="upload" 
          type="primary" 
          loading={uploading} 
          onClick={handleUpload}
          disabled={uploading || fileList.length === 0}
        >
          开始上传
        </Button>
      ]}
      maskClosable={false}
      destroyOnClose={true}
    >
      {/* 上传区域 */}
      <Upload.Dragger {...uploadProps}>
        <p className="ant-upload-drag-icon">
          <UploadOutlined style={{ fontSize: '24px' }} />
        </p>
        <p className="ant-upload-text">{uploadText}</p>
        <p className="ant-upload-hint">
          {hintText}
        </p>
      </Upload.Dragger>
      
      {/* 进度条 */}
      {uploading && (
        <div style={{ marginTop: 16 }}>
          <Progress percent={progress} status="active" />
          <p style={{ marginTop: 8, textAlign: 'center' }}>
            正在上传... {progress}%
          </p>
        </div>
      )}
    </Modal>
  );
};

export default UploadModalParam;
    